<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix='c' uri="http://java.sun.com/jsp/jstl/core"%> 
<script type="text/javascript">

var cpu = ${requestScope.completePCDetailPrice.CPUPRICE};
var mainboard = ${requestScope.completePCDetailPrice.MAINBOARDPRICE};
var cooler = ${requestScope.completePCDetailPrice.COOLERPRICE};
var memory = ${requestScope.completePCDetailPrice.MEMORYPRICE};
var graphic = ${requestScope.completePCDetailPrice.GRAPHICPRICE};
var hdd = ${requestScope.completePCDetailPrice.HDDPRICE};
var ssd = ${requestScope.completePCDetailPrice.SSDPRICE };
var dvd = ${requestScope.completePCDetailPrice.DVDPRICE};
var sound = ${requestScope.completePCDetailPrice.SOUNDPRICE};
var power = ${requestScope.completePCDetailPrice.POWERPRICE};
var kase = ${requestScope.completePCDetailPrice.CASEPRICE};
var os = ${requestScope.completePCDetailPrice.OSPRICE};
var keyboard = 0;
var moniter = 0;
var mouse = 0;
var sum = 0;

var cpuId = '${requestScope.completePCBasic.cpuId }';
var mainboardId = '${requestScope.completePCBasic.mainboardId }';
var coolerId = '${requestScope.completePCBasic.coolerId }';
var memoryId = '${requestScope.completePCBasic.memoryId }';
var graphicId = '${requestScope.completePCBasic.graphicId }';
var hddId = '${requestScope.completePCBasic.hddId }';
var ssdId = '${requestScope.completePCBasic.ssdId }';
var dvdId = '${requestScope.completePCBasic.dvdId }';
var soundId = '${requestScope.completePCBasic.soundId }';
var powerId = '${requestScope.completePCBasic.powerId }';
var kaseId = '${requestScope.completePCBasic.caseId }';
var osId = '${requestScope.completePCBasic.osId }';

var fileName='${requestScope.pc.FILENAME }';
var completeId = '${requestScope.pc.COMPLETEID }';
var completeName='${requestScope.pc.COMPLETENAME }';
var completeQuantity='${requestScope.pc.COMPLETEQUANTITY }';
var cpuName = '${requestScope.pc.CPUNAME }';
var mainboardName = '${requestScope.pc.MAINBOARDNAME }';
var coolerName = '${requestScope.pc.COOLERNAME }';
var memoryName = '${requestScope.pc.MEMORYNAME }';
var graphicName = '${requestScope.pc.GRAPHICNAME }';
var hddName = '${requestScope.pc.HDDNAME }';
var ssdName = '${requestScope.pc.SSDNAME }';
var dvdName = '${requestScope.pc.DVDNAME }';
var soundName = '${requestScope.pc.SOUNDNAME }';
var powerName = '${requestScope.pc.POWERNAME }';
var kaseName = '${requestScope.pc.CASENAME }';
var osName = '${requestScope.pc.OSNAME }';

$(document).ready(function(){	
	$("#fileName").val(fileName);
	$("#completeId").val(completeId);
	$("#completeName").val(completeName);
	$("#completeQuantity").val(completeQuantity);
	$("#mainboardName").val(mainboardName);
	$("#cpuName").val(cpuName);
	$("#coolerName").val(coolerName);
	$("#memoryName").val(memoryName);
	$("#graphicName").val(graphicName);
	$("#hddName").val(hddName);
	$("#ssdName").val(ssdName);
	$("#dvdName").val(dvdName);
	$("#soundName").val(soundName);	
	$("#powerName").val(powerName);	
	$("#caseName").val(kaseName);	
	$("#osName").val(osName);
	
	$("#mainboardId").val(mainboardId);
	$("#cpuId").val(cpuId);
	$("#coolerId").val(coolerId);
	$("#memoryId").val(memoryId);
	$("#graphicId").val(graphicId);
	$("#hddId").val(hddId);
	$("#ssdId").val(ssdId);
	$("#dvdId").val(dvdId);
	$("#soundId").val(soundId);	
	$("#powerId").val(powerId);	
	$("#caseId").val(kaseId);	
	$("#osId").val(osId);
	
	sum = cpu+mainboard+cooler+memory+graphic+hdd+ssd+dvd+sound+power+kase+os;
	$("#sum").html(sum);
	$("#completePrice").val(sum);
	
	$(".product").on("change", function(){
		var id = $(this).val();
		var txt = this.options[this.selectedIndex].text;
		$.getJSON("/droowa/product/getProductInfo.do", {"id":id,"sort":txt}, callback);
	});
		
});

function callback(data){
	if(data.category=='CPU'){
		cpu = data.price;
		$("#cpuName").val(data.name);
		$("#cpuId").val(data.id);
		$("#cpu").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='마우스'){
		mouse = data.price;
		
	}else if(data.category=='파워'){
		power = data.price;
		$("#powerName").val(data.name);
		$("#powerId").val(data.id);	
		$("#power").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='키보드'){
		keyboard = data.price;
		
	}else if(data.category=='케이스'){
		kase = data.price;
		$("#caseName").val(data.name);	
		$("#caseId").val(data.id);	
		$("#case").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='모니터'){
		moniter = data.price;
		
	}else if(data.category=='메인보드'){
		mainboard = data.price;
		$("#mainboardName").val(data.name);
		$("#mainboardId").val(data.id);
		$("#mainboard").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='쿨러'){
		cooler = data.price;
		$("#coolerName").val(data.name);
		$("#coolerId").val(data.id);
		$("#cooler").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='그래픽카드'){
		graphic = data.price;
		$("#graphic").val(data.name);
		$("#graphicId").val(data.id);
		$("#graphic").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='HDD'){
		hdd = data.price;
		$("#hddName").val(data.name);
		$("#hddId").val(data.id);
		$("#hdd").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='SSD'){
		ssd = data.price;
		$("#ssdName").val(data.name);
		$("#ssdId").val(data.id);
		$("#ssd").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='DVD'){
		dvd = data.price;
		$("#dvdName").val(data.name);
		$("#dvdId").val(data.id);
		$("#dvd").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='사운드카드'){
		sound = data.price;
		$("#soundName").val(data.name);
		$("#soundId").val(data.id);	
		$("#sound").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='운영체제'){
		os = data.price;
		$("#osName").val(data.name);	
		$("#osId").val(data.id);
		$("#os").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}else if(data.category=='메모리'){
		memory = data.price;
		$("#memoryName").val(data.name);
		$("#memoryId").val(data.id);
		$("#memory").html(data.name);
		$("#picture").html("<img height='244px' width='244px' src='/droowa/product-img/"+data.fileName+"'>");
	}
	sum = cpu+mainboard+cooler+memory+graphic+hdd+ssd+dvd+sound+power+kase+os;
	$("#sum").html(sum);
	$("#completePrice").val(sum);
}

function order(){
	var form=window.document.getElementById("form1");
	form.action="/${initParam.context_root}/order/orderForm.do";
	form.submit();
}
function shop(){
	var form=window.document.getElementById("form1");
	form.action="/${initParam.context_root}/customer/inShoppingCart.do";
	form.submit();
}
</script>
<style type="text/css">
 	hr {border:#A6A6A6 1px solid;}
  	.headline {margin-top: 0px; margin-bottom: 10px;}
  	.headtext {font-weight: bolder; color:#A6A6A6; margin-top: 20px; margin-bottom: 0px;}
  	.sum {font-weight: bold;}
</style>
<h1 class="headtext">제품상세정보</h1>
 <hr class="headline">

<div style="float: center;">
	<table class="table table-bordered " >
		<tr>
			<td>
				<img width="200px"  height="210px" src="/${initParam.context_root }/product-img/${requestScope.pc.FILENAME }">
			</td>
			<td>
				<table class="table table-striped">
					<tr>
						<td width="80px"><label>PC이름</label></td>
						<td width="200px"> ${requestScope.pc.COMPLETENAME }</td>
						<td width="80px"><label>PC가격</label></td>
						<td width="200px">${requestScope.pc.COMPLETEPRICE }</td>
						<td width="100px"><label>재고량</label></td>
						<td width="200px">${requestScope.pc.COMPLETEQUANTITY }</td>	
					</tr>
					<tr>
						<td><label>메인보드</label></td>
						<td>${requestScope.pc.MAINBOARDNAME }</td>
						<td><label>CPU</label></td>
						<td>${requestScope.pc.CPUNAME }</td>
						<td><label>쿨러</label></td>
						<td>${requestScope.pc.COOLERNAME }</td>	
					</tr>	
					<tr>	
						<td><label>메모리</label></td>
						<td>${requestScope.pc.MEMORYNAME }</td>
						<td><label>그래픽</label></td>
						<td>${requestScope.pc.GRAPHICNAME }</td>
						<td><label>HDD</label></td>
						<td>${requestScope.pc.HDDNAME }</td>
					</tr>	 
					<tr>
						<td><label>SDD</label></td>
						<td>${requestScope.pc.SSDNAME }</td>
						<td><label>DVD</label></td>
						<td>${requestScope.pc.DVDNAME }</td>
						<td><label>사운드</label></td>
						<td>${requestScope.pc.SOUNDNAME }</td>
					</tr>
					<tr>
						<td><label>파워</label></td>
						<td>${requestScope.pc.POWERNAME }</td>
						<td><label>케이스</label></td>
						<td>${requestScope.pc.CASENAME }</td>
						<td><label>운영체재</label></td>
						<td>${requestScope.pc.OSNAME }</td>
					</tr>	 
				</table>
			</td>
		</tr>
	</table>

</div><br><br>
<div align="center"><img src="/${initParam.context_root }/img/ProductPerformance.jpg"></div>
<h2 class="headtext">제품사양변경</h2><hr class="headline">
<div style="margin:auto;width:1000px">
<form id="form1"  method="post" encType="multipart/form-data">
<input type="hidden" id="custId" name="custId" value="${sessionScope.login_info.custId }">
<input type="hidden" id="fileName" name="fileName">
<input type="hidden" id="completeId" name="completeId">
<input type="hidden" id="completeName" name="completeName">
<input type="hidden" id="completePrice" name="completePrice">
<input type="hidden" id="completeQuantity" name="completeQuantity">
<input type="hidden" id="mainboardName" name="mainboardName">
<input type="hidden" id="cpuName" name="cpuName">
<input type="hidden" id="coolerName" name="coolerName">
<input type="hidden" id="memoryName" name="memoryName">
<input type="hidden" id="graphicName" name="graphicName">
<input type="hidden" id="hddName" name="hddName">
<input type="hidden" id="ssdName" name="ssdName">
<input type="hidden" id="dvdName" name="dvdName">
<input type="hidden" id="soundName" name="soundName">
<input type="hidden" id="powerName" name="powerName">
<input type="hidden" id="caseName" name="caseName">
<input type="hidden" id="osName" name="osName">

<input type="hidden" id="mainboardId" name="mainboardId">
<input type="hidden" id="cpuId" name="cpuId">
<input type="hidden" id="coolerId" name="coolerId">
<input type="hidden" id="memoryId" name="memoryId">
<input type="hidden" id="graphicId" name="graphicId">
<input type="hidden" id="hddId" name="hddId">
<input type="hidden" id="ssdId" name="ssdId">
<input type="hidden" id="dvdId" name="dvdId">
<input type="hidden" id="soundId" name="soundId">
<input type="hidden" id="powerId" name="powerId">
<input type="hidden" id="caseId" name="caseId">
<input type="hidden" id="osId" name="osId">
<table>
<tr>
<td>
<table class="table table-bordered"  style="float:left;margin-left:100px;margin-bottom:50px;margin-top:25px;width:500px;">
	<tr align="center" style="border:1px; border-collapse:collapse; border-color: #EAEAEA">
		<td class="alert alert-success" width="200px"><strong>컴퓨터명</strong></td>
		<td class="alert alert-success" width="200px"><strong>컴퓨터명</strong></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">메인보드</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='메인보드'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="mainboard"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">CPU</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='CPU'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="cpu"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">쿨러</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='쿨러'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="cooler"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">RAM</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='RAM'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="ram"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">그래픽카드</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='그래픽카드'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="graphic"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">HDD</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='HDD'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="hdd"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">SSD</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='SSD'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="ssd"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">DVD</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='DVD'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="dvd"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">사운드카드</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='사운드카드'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="sound"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">파워</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='파워'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="power"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">케이스</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='케이스'}">	
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="case"></td>
	</tr>
	<tr>
		<td>
			<select class="product" style="width:200px;">
				<option value="">OS</option>
				<c:forEach items="${requestScope.product_list}" var="product">
					<c:choose>
						<c:when test="${product.categoryName=='운영체제'}">
							<option value="${product.id}">
								${product.name}
							</option>
						</c:when>
					</c:choose>
				</c:forEach>
			</select>
		</td>
		<td align="center" id="os"></td>
	</tr>
		<td align="center" colspan="2"> 총합계 : <span id="sum"></span>원
	</td>
	<tr align="center">
			<td colspan="2">
				<input type="button" value="결제하기"  class="btn btn-danger" onclick="order()">
				<input type="button" value="장바구니"  class="btn btn-warning" onclick="shop()">
			</td>
		</tr>
</table>
</td>
<td>
<table style="float:left;margin-top:25px">
<p id="picture"></p>
</table>
</td>
</tr>
</table>
</form>
</div>